SYNC-HP用のサンプル
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

66 lines
1.6KB

  1. import React, { FC } from "react";
  2. import { GetStaticPaths, GetStaticProps, GetStaticPropsContext } from "next";
  3. import { fetchGuitarDetail, fetchGuitars } from "../../lib/strapi";
  4. import { ParsedUrlQuery } from "querystring";
  5. import { Guitar } from "../../type/guitars";
  6. import Image from "next/image";
  7. const Detail: FC<Props> = ({ guitar }) => {
  8. return (
  9. <div>
  10. <div>ID: {guitar?.id}</div>
  11. <div>名前:{guitar?.attributes.name}</div>
  12. <div>説明:{guitar?.attributes.description}</div>
  13. <div>
  14. <Image
  15. src={guitar?.attributes.image.data[0].attributes.url}
  16. height={240}
  17. width={560}
  18. />
  19. </div>
  20. </div>
  21. );
  22. };
  23. interface Props {
  24. guitar: Guitar;
  25. }
  26. interface IParams extends ParsedUrlQuery {
  27. id: string;
  28. }
  29. // ===============================
  30. // 静的サイト作成時にはgetStaticPropsの中で
  31. // 表示データを作成する
  32. // ===============================
  33. export const getStaticProps: GetStaticProps = async (ctx) => {
  34. const { id } = ctx.params as IParams;
  35. const guitar = await fetchGuitarDetail(id);
  36. return {
  37. props: {
  38. guitar,
  39. },
  40. };
  41. };
  42. // ================================
  43. // 表示可能なデータを取得する
  44. // ================================
  45. export const getStaticPaths: GetStaticPaths = async () => {
  46. const guitars = await fetchGuitars();
  47. // とりうるIDの一覧を取得する
  48. const paths = guitars.map((guitars) => ({
  49. params: {
  50. id: guitars.id.toString(),
  51. },
  52. }));
  53. return {
  54. paths,
  55. fallback: true,
  56. };
  57. };
  58. export default Detail;